/* ════════════════════════════════════════════════════════════
        DHUMAL INDUSTRIES — Dark Industrial Theme (all-in-one)
        Sections numbered [01]–[12]: delete a section's HTML + its
        CSS block + its JS module together — nothing else breaks.
        ════════════════════════════════════════════════════════════ */

/* ── 00 · TOKENS / RESET / UTILITIES ───────────────────────── */
:root {
    --ink: #0d1210;
    --coal: #151b18;
    --paper: #f5f4f0;
    --white: #fff;
    --green: #00A859;
    --green-hi: #35c97e;
    --green-deep: #05351F;
    --red: #ED3237;
    --grey: #6f7a74;
    --line: rgba(13,18,16,.13);
    --line-l: rgba(245,244,240,.16);
    --shadow: 0 22px 48px rgba(13,18,16,.16);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Inter',sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased
}

img {
    max-width: 100%;
    display: block;
    -webkit-user-drag: none;
    user-select: none
}

a {
    color: inherit;
    text-decoration: none
}

ul {
    list-style: none
}

button {
    font-family: inherit;
    cursor: pointer
}

::selection {
    background: var(--green);
    color: var(--white)
}

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px
}

section[id], div[id] {
    scroll-margin-top: 120px
}

.container {
    width: min(1240px,92vw);
    margin-inline: auto
}

.serif {
    font-family: 'Playfair Display',serif
}

/* shared buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    transition: transform .25s,background .25s,color .25s,border-color .25s
}

.btn-green {
    background: var(--green);
    color: var(--white)
}

    .btn-green:hover {
        background: var(--paper);
        color: var(--ink);
        transform: translateY(-3px)
    }

.btn-line {
    border: 1.5px solid rgba(245,244,240,.45);
    color: var(--paper)
}

    .btn-line:hover {
        background: var(--paper);
        color: var(--ink);
        border-color: var(--paper)
    }

.btn-white {
    background: var(--paper);
    color: var(--ink)
}

    .btn-white:hover {
        background: var(--green);
        color: var(--white);
        transform: translateY(-3px)
    }

/* shared kicker */
.kick {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink)
}

    .kick::before {
        content: "";
        width: 34px;
        height: 3px;
        background: var(--red);
        border-radius: 3px
    }

/* ── CRASH-PROOF SCROLL REVEAL ───────────────────────────────
        JS adds .rv-hide (hidden) only AFTER it confirms it can run.
        If any error happens anywhere, a safety-net instantly removes
        .rv-hide from everything → content can NEVER stay blank.
        No JS at all → nothing is ever hidden. */
.reveal {
    transition: opacity .8s ease,transform .8s ease
}

    .reveal.rv-hide {
        opacity: 0;
        transform: translateY(30px)
    }

        .reveal.rv-hide.l {
            transform: translateX(-46px)
        }

        .reveal.rv-hide.r {
            transform: translateX(46px)
        }

        .reveal.rv-hide.z {
            transform: scale(.92)
        }

        .reveal.rv-hide.d1 {
            transition-delay: .1s
        }

        .reveal.rv-hide.d2 {
            transition-delay: .22s
        }

        .reveal.rv-hide.d3 {
            transition-delay: .34s
        }

        .reveal.rv-hide.d4 {
            transition-delay: .46s
        }

    .reveal.rv-in {
        opacity: 1;
        transform: none
    }

@media (prefers-reduced-motion:reduce) {
    .reveal {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important
    }
}

/* ── 01 · SCROLL PROGRESS BAR ──────────────────────────────── */
#scrollBar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    height: 3px;
    width: 0;
    background: var(--red)
}

/* ── 02 · TOPBAR ───────────────────────────────────────────── */
.topbar {
    background: var(--ink);
    color: rgba(245,244,240,.65);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--line-l)
}

    .topbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 9px 0
    }

.tb-links {
    display: flex;
    gap: 20px
}

    .tb-links a {
        color: rgba(245,244,240,.75);
        transition: color .25s
    }

        .tb-links a:hover {
            color: var(--green-hi)
        }

.tb-right {
    display: flex;
    align-items: center;
    gap: 18px
}

.tb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line-l);
    padding-bottom: 3px
}

    .tb-search input {
        background: transparent;
        border: 0;
        color: var(--paper);
        font: inherit;
        width: 140px;
        outline: none
    }

        .tb-search input::placeholder {
            color: rgba(245,244,240,.4)
        }

    .tb-search i {
        color: var(--green-hi);
        font-size: 12px
    }

.tb-lang {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--paper)
}

@media (max-width:760px) {
    .topbar {
        display: none
    }
}

/* ── 03 · HEADER + NAV (desktop hover / mobile accordion) ──── */
#hdr {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: #fff;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-l)
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
    transition: padding .3s
}

#hdr.scrolled .nav-wrap {
    padding: 8px 0
}

.logo img {
    height: 52px;
    width: auto
}

#nav > ul {
    display: flex;
    gap: 2px
}

#nav li {
    position: relative
}

#nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 14px;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .25s,background .25s
}

#nav > ul > li > a:hover {
    color: var(--green-hi);
    background: rgba(245,244,240,.06)
}

#nav .fa-chevron-down {
    font-size: 9px;
    opacity: .7
}

/* dropdown */
.drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 300px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all .28s ease;
    z-index: 1500
}

#nav li:hover > .drop, #nav li:focus-within > .drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

#nav .drop a, #nav .sub a {
    color: var(--ink);
    padding: 11px 20px;
    font-size: 14px;
    border-radius: 0
}

    #nav .drop a i:first-child, #nav .sub a i:first-child {
        color: var(--green);
        width: 18px;
        text-align: center
    }

    #nav .drop a:hover, #nav .sub a:hover {
        background: #eef5f1;
        color: var(--green-deep)
    }

/* submenu (fly-out right) */
.sub {
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 290px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(14px);
    transition: all .28s ease;
    z-index: 1600
}

#nav li:hover > .sub, #nav li:focus-within > .sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.sub-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: .5
}

/* flip submenus of the last 3 top items to avoid right-edge overflow */
#nav > ul > li:nth-last-child(-n+3) .sub {
    left: auto;
    right: 100%;
    transform: translateX(-14px)
}

#nav > ul > li:nth-last-child(-n+3) li:hover > .sub,
#nav > ul > li:nth-last-child(-n+3) li:focus-within > .sub {
    transform: translateX(0)
}

/* hamburger (injected by JS; hidden on desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 8px
}

    .hamburger span {
        width: 26px;
        height: 2.5px;
        background: var(--paper);
        border-radius: 2px;
        transition: transform .3s,opacity .3s
    }

#hdr.nav-open .hamburger span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg)
}

#hdr.nav-open .hamburger span:nth-child(2) {
    opacity: 0
}

#hdr.nav-open .hamburger span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg)
}

@media (max-width:1080px) {
    .hamburger {
        display: flex
    }

    #nav {
        width: 100%
    }

        #nav > ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            flex-direction: column;
            align-items: stretch;
            background: var(--ink);
            border-bottom: 1px solid var(--line-l);
            padding: 14px 4vw 22px;
            gap: 2px;
            max-height: calc(100vh - 80px);
            overflow-y: auto
        }

    #hdr.nav-open #nav > ul {
        display: flex
    }

    #nav a {
        justify-content: space-between;
        width: 100%
    }

    .drop, .sub {
        position: static !important;
        left: auto !important;
        right: auto !important;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none !important;
        box-shadow: none;
        background: rgba(245,244,240,.04);
        border-radius: 10px;
        padding: 4px 0 6px;
        display: none
    }

    #nav li.open > .drop, #nav li.open > .sub {
        display: block
    }

    #nav .drop a, #nav .sub a {
        padding-left: 34px;
        font-size: 13.5px
    }

    #nav .sub a {
        padding-left: 52px
    }

    #nav .fa-chevron-down {
        transition: transform .3s
    }

    #nav li.open > a .fa-chevron-down {
        transform: rotate(180deg)
    }
}

/* ── 04 · HERO SLIDER ──────────────────────────────────────── */
.hero {
    position: relative;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper)
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease,visibility 1.1s
}

    .slide.on {
        opacity: 1;
        visibility: visible;
        z-index: 1
    }

    .slide .bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transform: scale(1.06);
        transition: transform 7s ease-out
    }

    .slide.on .bg {
        transform: scale(1)
    }
    /* REPLACE each URL with your own photo */
    .slide.s1 .bg {
        background-image: linear-gradient(90deg,rgba(13,18,16,.93) 0%,rgba(13,18,16,.68) 45%,rgba(13,18,16,.3) 100%),url('https://dhumal.com/public/uploads/1710244091_1e37ffff05de0d3d9f8d.jpg')
    }

    .slide.s2 .bg {
        background-image: linear-gradient(90deg,rgba(13,18,16,.93) 0%,rgba(13,18,16,.68) 45%,rgba(13,18,16,.3) 100%),url('https://dhumal.com/public/uploads/1710243713_8b6e2077c889ab445dab.jpg')
    }

    .slide.s3 .bg {
        background-image: linear-gradient(90deg,rgba(13,18,16,.93) 0%,rgba(13,18,16,.68) 45%,rgba(13,18,16,.3) 100%),url('https://dhumal.com/public/uploads/1741945282_157dca191e0dfe6d2dfe.jpg')
    }

.hero-in {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 110px 0
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: 22px
}

    .eyebrow::before {
        content: "";
        width: 40px;
        height: 2px;
        background: var(--green-hi)
    }

    .eyebrow i {
        color: var(--green-hi)
    }

.hero h1 {
    font-weight: 800;
    font-size: clamp(48px,9.5vw,116px);
    line-height: .97;
    letter-spacing: -1px;
    text-transform: uppercase
}

    .hero h1 em {
        font-family: 'Playfair Display',serif;
        font-style: italic;
        font-weight: 600;
        text-transform: none;
        color: var(--green-hi);
        letter-spacing: 0
    }

.hero-in > p {
    max-width: 560px;
    margin-top: 24px;
    font-size: 17px;
    color: rgba(245,244,240,.82)
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px
}

    .hero-meta span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border: 1px solid rgba(245,244,240,.28);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600
    }

    .hero-meta i {
        color: var(--green-hi)
    }

.hero-arrows {
    position: absolute;
    right: 3vw;
    bottom: 34px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px
}

    .hero-arrows button {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1.5px solid rgba(245,244,240,.35);
        background: transparent;
        color: var(--paper);
        font-size: 14px;
        transition: all .25s
    }

        .hero-arrows button:hover {
            background: var(--green);
            border-color: var(--green);
            color: var(--ink)
        }

.hero-side {
    position: absolute;
    right: 3vw;
    top: 44%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px
}

    .hero-side .num {
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 2px;
        color: var(--paper)
    }

        .hero-side .num small {
            opacity: .55
        }

.h-track {
    width: 130px;
    height: 2px;
    background: rgba(245,244,240,.25);
    border-radius: 2px;
    overflow: hidden
}

#hBar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--green-hi)
}

    #hBar.run {
        animation: hRun 6s linear forwards
    }

@keyframes hRun {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@media (max-width:760px) {
    .hero {
        min-height: 560px
    }

    .hero-side {
        display: none
    }

    .hero-arrows {
        bottom: 20px
    }
}

@media (prefers-reduced-motion:reduce) {
    .slide .bg {
        transition: none;
        transform: none
    }

    #hBar.run {
        animation: none;
        width: 100%
    }
}

/* ── 05 · BRANCH CARDS ─────────────────────────────────────── */
.branches {
    background: var(--paper);
    padding: 96px 0
}

.branch-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

.branch {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .35s,box-shadow .35s,border-color .35s
}

    .branch:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow);
        border-color: var(--green)
    }

    .branch .ribbon {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 2;
        background: var(--red);
        color: var(--white);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        padding: 6px 13px;
        border-radius: 6px
    }

    .branch .ph {
        aspect-ratio: 16/10;
        overflow: hidden;
        background: var(--coal)
    }

        .branch .ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease
        }

    .branch:hover .ph img {
        transform: scale(1.07)
    }

    .branch .bd {
        padding: 22px 24px 26px
    }

        .branch .bd small {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--grey)
        }

        .branch .bd h3 {
            font-size: 30px;
            margin: 6px 0 10px
        }

    .branch .open {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--green-deep)
    }

    .branch .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        animation: pulse 1.8s infinite
    }

@keyframes pulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(0,168,89,.5)
    }

    55% {
        box-shadow: 0 0 0 7px rgba(0,168,89,0)
    }
}

@media (max-width:900px) {
    .branch-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }
}

/* ── 06 · ABOUT ────────────────────────────────────────────── */
.about {
    background: var(--white);
    padding: 110px 0
}

.about-grid {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: 64px;
    align-items: center
}

.collage {
    position: relative;
    padding-bottom: 64px
}

    .collage .big {
        width: 82%;
        aspect-ratio: 4/3;
        border-radius: 18px;
        overflow: hidden
    }

        .collage .big img, .collage .small img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

    .collage .small {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 44%;
        aspect-ratio: 1/1;
        border-radius: 16px;
        overflow: hidden;
        border: 6px solid var(--white);
        box-shadow: var(--shadow)
    }

.exp-badge {
    position: absolute;
    left: 0;
    bottom: 6px;
    z-index: 2;
    background: var(--green);
    color: var(--white);
    border-radius: 14px;
    padding: 16px 22px;
    box-shadow: 0 14px 30px rgba(0,168,89,.35)
}

    .exp-badge b {
        display: block;
        font-weight: 800;
        font-size: 40px;
        line-height: 1
    }

    .exp-badge small {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2.5px
    }

.about-txt h2 {
    font-weight: 800;
    font-size: clamp(30px,4.2vw,48px);
    line-height: 1.08;
    text-transform: uppercase;
    margin-top: 14px
}

    .about-txt h2 em {
        font-family: 'Playfair Display',serif;
        font-style: italic;
        font-weight: 600;
        text-transform: none;
        color: var(--green)
    }

.about-txt > p {
    margin-top: 18px;
    font-size: 16.5px;
    color: rgba(13,18,16,.78)
}

.about-txt p b {
    color: var(--green)
}

.ticks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px
}

    .ticks li {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 16px;
        background: var(--paper);
        font-size: 13.5px;
        font-weight: 700
    }

    .ticks i {
        color: var(--green)
    }

.about-cta {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 32px
}

.sig {
    font-family: 'Playfair Display',serif;
    font-style: italic;
    font-size: 22px;
    color: var(--green-deep)
}

    .sig small {
        display: block;
        font-family: 'Inter',sans-serif;
        font-style: normal;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--grey);
        margin-top: 4px
    }

@media (max-width:960px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 44px
    }

    .ticks {
        grid-template-columns: 1fr
    }
}

/* ── 07 · STATS BAND ───────────────────────────────────────── */
.stats {
    background: linear-gradient(120deg,var(--green-deep),#032417);
    border-block: 4px solid var(--red);
    padding: 64px 0
}

    .stats .container {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 26px
    }

.stat {
    display: flex;
    align-items: center;
    gap: 18px
}

    .stat .ic {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(0,168,89,.16);
        border: 1px solid rgba(0,168,89,.45);
        color: var(--green-hi);
        display: grid;
        place-items: center;
        font-size: 19px
    }

    .stat h3 {
        font-weight: 800;
        font-size: clamp(36px,4vw,54px);
        line-height: 1;
        color: var(--paper)
    }

    .stat p {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(245,244,240,.6);
        margin-top: 5px
    }

@media (max-width:900px) {
    .stats .container {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }
}

@media (max-width:520px) {
    .stats .container {
        grid-template-columns: 1fr
    }
}

/* ── 08 · PRODUCTS CAROUSEL ────────────────────────────────── */
.products {
    background: var(--paper);
    padding: 110px 0
}

.car-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    margin-bottom: 44px
}

    .car-head h2 {
        margin-top: 12px
    }

.car-btns {
    display: flex;
    gap: 10px
}

    .car-btns button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1.5px solid var(--ink);
        background: transparent;
        color: var(--ink);
        font-size: 14px;
        transition: all .25s
    }

        .car-btns button:hover {
            background: var(--green);
            border-color: var(--green);
            color: var(--white)
        }

.p-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--green) transparent
}

    .p-track.dragging {
        scroll-snap-type: none;
        cursor: grabbing
    }

.p-card {
    flex: 0 0 min(340px,80vw);
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .35s,border-color .35s,box-shadow .35s
}

    .p-card:hover {
        transform: translateY(-8px);
        border-color: var(--green);
        box-shadow: var(--shadow)
    }

    .p-card .ph {
        position: relative;
        aspect-ratio: 16/10;
        overflow: hidden;
        background: var(--coal)
    }

        .p-card .ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s
        }

    .p-card:hover .ph img {
        transform: scale(1.07)
    }

    .p-card .tag {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 2;
        background: var(--green);
        color: var(--white);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: 6px
    }

    .p-card .num {
        position: absolute;
        right: 16px;
        bottom: 8px;
        z-index: 2;
        font-weight: 800;
        font-size: 46px;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(245,244,240,.7)
    }

    .p-card .bd {
        padding: 22px 24px 26px
    }

        .p-card .bd h3 {
            font-size: 26px
        }

        .p-card .bd p {
            font-size: 14px;
            color: var(--grey);
            margin: 10px 0 18px
        }

    .p-card .go {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 800;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--green-deep);
        transition: color .25s
    }

        .p-card .go i {
            transition: transform .3s
        }

    .p-card:hover .go {
        color: var(--green)
    }

        .p-card:hover .go i {
            transform: translateX(6px)
        }

.p-progress {
    height: 3px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px
}

#pBar {
    display: block;
    height: 100%;
    width: 20%;
    background: var(--green);
    transition: width .2s
}

/* ── 09 · REVIEWS ──────────────────────────────────────────── */
.reviews {
    background: var(--white);
    padding: 110px 0
}

.rev-grid {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 24px;
    align-items: stretch
}

    .rev-grid > .reveal:last-child {
        position: relative;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 54px 50px 36px;
        display: flex;
        flex-direction: column
    }

.quote-mark {
    position: absolute;
    top: 4px;
    left: 30px;
    font-family: 'Playfair Display',serif;
    font-size: 110px;
    line-height: 1;
    color: rgba(0,168,89,.18);
    pointer-events: none
}

.r-slide {
    display: none
}

    .r-slide.on {
        display: block
    }

    .r-slide blockquote {
        position: relative;
        font-weight: 600;
        font-size: clamp(19px,2.2vw,24px);
        line-height: 1.6
    }

.r-who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line)
}

    .r-who img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--green)
    }

    .r-who b {
        display: block;
        font-size: 15px
    }

    .r-who small {
        display: block;
        font-size: 11.5px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--grey);
        margin: 2px 0
    }

    .r-who .st {
        font-size: 12px;
        color: #f5a623;
        letter-spacing: 2px
    }

.r-ctrl {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px
}

    .r-ctrl button {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1.5px solid var(--ink);
        background: transparent;
        color: var(--ink);
        font-size: 13px;
        transition: all .25s
    }

        .r-ctrl button:hover {
            background: var(--ink);
            color: var(--paper)
        }

.r-dots {
    display: flex;
    gap: 8px;
    margin-left: auto
}

    .r-dots span {
        width: 8px;
        height: 8px;
        border-radius: 99px;
        background: var(--line);
        transition: all .3s;
        cursor: pointer
    }

        .r-dots span.on {
            width: 24px;
            background: var(--green)
        }

.rate-card {
    background: var(--green-deep);
    color: var(--paper);
    border-radius: 22px;
    padding: 42px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

    .rate-card .n {
        font-weight: 800;
        font-size: 74px;
        line-height: 1;
        color: var(--green-hi)
    }

    .rate-card .st {
        color: var(--green-hi);
        font-size: 14px;
        letter-spacing: 3px
    }

    .rate-card b {
        margin-top: 10px;
        font-size: 15px
    }

    .rate-card small {
        font-size: 13px;
        color: rgba(245,244,240,.65)
    }

.g-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    background: var(--paper);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px
}

.gg {
    font-weight: 800
}

.g1 {
    color: #4285F4
}

.g2 {
    color: #EA4335
}

.g3 {
    color: #FBBC05
}

.g4 {
    color: #4285F4
}

.g5 {
    color: #34A853
}

@media (max-width:960px) {
    .rev-grid {
        grid-template-columns: 1fr
    }

        .rev-grid > .reveal:last-child {
            padding: 44px 26px 30px
        }
}

/* ── 10 · PROJECTS (magazine grid) ─────────────────────────── */
.projects {
    background: var(--paper);
    padding: 110px 0
}

.sec-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 46px
}

    .sec-top h2 {
        font-weight: 800;
        font-size: clamp(30px,4.6vw,52px);
        line-height: 1.05;
        text-transform: uppercase;
        margin-top: 10px
    }

        .sec-top h2 b {
            color: var(--green)
        }

    .sec-top p {
        max-width: 380px;
        color: var(--grey);
        font-size: 15px
    }

.proj-grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: 240px;
    gap: 18px
}

.proj {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    color: var(--paper);
    isolation: isolate;
    display: flex
}

    .proj img {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s ease
    }

    .proj::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(0deg,rgba(13,18,16,.88) 0%,rgba(13,18,16,.15) 62%)
    }

    .proj:hover img {
        transform: scale(1.08)
    }

    .proj:nth-child(1) {
        grid-column: span 7;
        grid-row: span 2
    }

    .proj:nth-child(2) {
        grid-column: span 5;
        grid-row: span 2
    }

    .proj:nth-child(3), .proj:nth-child(4), .proj:nth-child(5) {
        grid-column: span 4
    }

    .proj:nth-child(6) {
        grid-column: span 12
    }

    .proj .idx {
        position: absolute;
        top: 14px;
        right: 20px;
        font-weight: 800;
        font-size: 52px;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(245,244,240,.4);
        transition: all .3s
    }

    .proj:hover .idx {
        color: var(--green-hi);
        -webkit-text-stroke: 1.5px var(--green-hi)
    }

    .proj .info {
        margin-top: auto;
        position: relative;
        padding: 24px
    }

        .proj .info small {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--green-hi)
        }

        .proj .info h3 {
            font-size: clamp(20px,2.3vw,27px);
            margin-top: 5px
        }

    .proj .more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--green-hi)
    }

        .proj .more i {
            transition: transform .3s
        }

    .proj:hover .more i {
        transform: translateX(6px)
    }

@media (max-width:980px) {
    .proj-grid {
        grid-auto-rows: 230px
    }

    .proj:nth-child(n) {
        grid-column: span 12;
        grid-row: span 1
    }
}

/* ── 11 · SUPPORT CTA ──────────────────────────────────────── */
.support {
    background: var(--white);
    padding: 80px 0
}

.sup-box {
    background: linear-gradient(115deg,var(--green-deep),#06452a);
    border-radius: 26px;
    padding: 44px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap
}

.sup-left {
    display: flex;
    align-items: center;
    gap: 22px
}

.sup-ic {
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 24px
}

.sup-left h3 {
    font-size: 26px;
    color: var(--paper)
}

.sup-left p {
    color: rgba(245,244,240,.75);
    font-size: 15px;
    margin-top: 5px
}

.sup-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap
}

.sup-num {
    display: flex;
    align-items: center;
    gap: 13px;
    font-weight: 800;
    font-size: clamp(21px,2.6vw,29px);
    color: var(--paper)
}

    .sup-num i {
        color: var(--green-hi)
    }

@media (max-width:760px) {
    .sup-box {
        padding: 34px 26px
    }
}

/* ── 12 · FOOTER + WAVE + COPYBAR ──────────────────────────── */
.wave {
    line-height: 0;
    background: var(--white)
}

    .wave svg {
        width: 100%;
        height: 70px;
        display: block
    }

footer {
    background: #05351F;
    color: rgba(245,244,240,.8);
    padding: 70px 0 50px
}

.f-grid {
    display: grid;
    grid-template-columns: 5fr 3fr 4fr;
    gap: 50px
}

.flogo {
    display: inline-block;
    background: var(--paper);
    padding: 14px 18px;
    border-radius: 12px
}

    .flogo svg {
        width: 200px;
        height: 54px;
        display: block
    }

.f-col > p {
    margin-top: 18px;
    font-size: 14.5px;
    max-width: 44ch
}

.socials {
    display: flex;
    gap: 10px;
    margin-top: 22px
}

    .socials a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(245,244,240,.28);
        display: grid;
        place-items: center;
        color: var(--paper);
        transition: all .25s
    }

        .socials a:hover {
            background: var(--green);
            border-color: var(--green);
            color: var(--ink)
        }

.f-col h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--green-hi);
    margin-bottom: 18px
}

.f-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14.5px;
    transition: color .25s,transform .25s
}

    .f-links a i {
        font-size: 10px;
        color: var(--green-hi)
    }

    .f-links a:hover {
        color: var(--green-hi);
        transform: translateX(5px)
    }

.f-contact li {
    display: flex;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.85
}

.f-contact i {
    color: var(--green-hi);
    margin-top: 5px
}

.map-box {
    margin-top: 20px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(245,244,240,.18)
}

    .map-box iframe {
        width: 100% !important;
        height: 210px !important;
        border: 0;
        display: block
    }

.copybar {
    background: #031b10;
    color: rgba(245,244,240,.55);
    border-top: 1px solid rgba(245,244,240,.1)
}

    .copybar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 16px 0;
        font-size: 12.5px
    }

    .copybar strong {
        color: var(--paper)
    }

    .copybar a {
        color: var(--green-hi);
        font-weight: 700
    }

        .copybar a:hover {
            text-decoration: underline
        }

.cb-sec2 {
    display: flex;
    gap: 10px
}

.chip {
    background: var(--paper);
    border-radius: 10px;
    padding: 4px 6px;
    display: grid;
    place-items: center
}

@media (max-width:900px) {
    .f-grid {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .copybar .container {
        flex-direction: column
    }
}